{% extends 'layout.html' %}

{% block content %}

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> 新建机房 </h3>
        </div>
        <div class="panel-body">
            <form method="POST" novalidate>
                {% csrf_token %}
                <!-- 单独显示 EquipmentRoom_user_info 字段 -->
                <div class="form-group">
                    <label for="user-search-trigger">{{ form.EquipmentRoom_user_info.label }}</label>
                    <input type="text" id="user-search-trigger" name="EquipmentRoom_user_info" class="form-control"
                           placeholder="点击搜索用户负责人A" data-toggle="modal" data-target="#userModal" readonly
                           onclick="console.log('Modal trigger clicked')">
                    <span style="color: red;">{{ form.EquipmentRoom_user_info.errors.0 }}</span>
                </div>

                <!-- 循环显示其他字段 -->
                {% for field in form %}
                {% if field.name != 'EquipmentRoom_user_info' %}
                <div class="form-group">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span style="color: red;">{{ field.errors.0 }}</span>
                </div>
                {% endif %}
                {% endfor %}


                <!--                <div class="form-group">-->
                <!--                    <label>用户负责人8</label>-->
                <!--                    <input type="text" id="user-search-trigger-info" name="EquipmentRoom_user_info" class="form-control"-->
                <!--                           placeholder="点击搜索用户负责人1"-->
                <!--                           data-toggle="modal" data-target="#userModal" readonly-->
                <!--                           onclick="console.log('Modal trigger clicked')">-->
                <!--                </div>-->
                <button type="submit" class="btn btn-primary">提 交</button>
            </form>
        </div>
    </div>
</div>

<!-- 用户列表模态框 -->
<!--&lt;!&ndash; 搜索输入框 &ndash;&gt;-->
<!--<div class="form-group">-->
<!--    <label for="user-search-trigger">{{ form.EquipmentRoom_user_info.label }}</label>-->
<!--    <input type="text" id="user-search-trigger" name="EquipmentRoom_user_info" class="form-control"-->
<!--           placeholder="点击搜索用户负责人A" data-toggle="modal" data-target="#userModal" readonly-->
<!--           onclick="console.log('Modal trigger clicked')">-->
<!--    <span style="color: red;">{{ form.EquipmentRoom_user_info.errors.0 }}</span>-->
<!--</div>-->

<!-- 模态框 (Modal) -->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalLabel">搜索用户负责人A</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 搜索表单 -->
                <form>
                    <div class="form-group">
                        <label for="searchInput">搜索用户QQQ</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="请输入用户名">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="performSearch()">搜索</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 引入jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.bundle.min.js"
        onerror="console.error('引入Bootstrap JS失败，请检查路径或网络连接。')"></script>

<!-- 引入jQuery -->
<!--<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>-->
<!--&lt;!&ndash; 引入Bootstrap JS &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>-->

<script>
function performSearch() {
            console.log('搜索触发');
            const searchInput = document.getElementById('searchInput').value;
            console.log('搜索关键词:', searchInput);

            fetch('/search_users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ keyword: searchInput })
            })
            .then(response => response.json())
            .then(data => {
                displaySearchResults(data);
            })
            .catch(error => {
                console.error('搜索失败:', error);
            });
        }

        function displaySearchResults(results) {
            const searchResultsDiv = document.getElementById('searchResults');
            searchResultsDiv.innerHTML = ''; // 清空之前的搜索结果

            if (results.length === 0) {
                searchResultsDiv.innerHTML = '<p>没有找到匹配的用户</p>';
            } else {
                results.forEach(user => {
                    const userElement = document.createElement('div');
                    userElement.className = 'user-result';
                    userElement.innerHTML = `                        <strong>${user.username}</strong> -
                        部门: ${user.department} -
                        组: ${user.group} -
                        电话: ${user.phone_number} -
                        描述: ${user.description}                    `;
                    userElement.onclick = () => selectUser(user);
                    searchResultsDiv.appendChild(userElement);
                });
            }
        }

        function selectUser(user) {
            document.getElementById('user-search-trigger').value = user.username;


            $('#userModal').modal('hide'); // 使用 jQuery 关闭模态框
        }


</script>


{% endblock %}

